<template>
  <div class="bg-white min-h-screen">
    <!-- 返回按钮 -->
    <div class="p-4">
      <button @click="goBack">
        <i class="fa fa-arrow-left text-lg"></i>
      </button>
    </div>

    <!-- 登录表单 -->
    <div class="px-6 mt-10">
      <h2 class="text-2xl font-bold text-center mb-8">登录</h2>

      <div class="space-y-4">
        <div>
          <input
              type="text"
              v-model="username"
              placeholder="请输入手机号/用户名"
              class="w-full py-3 px-4 border-b border-gray-300 focus:outline-none focus:border-primary-500"
          >
        </div>
        <div>
          <input
              type="password"
              v-model="password"
              placeholder="请输入密码"
              class="w-full py-3 px-4 border-b border-gray-300 focus:outline-none focus:border-primary-500"
          >
        </div>
        <div class="flex justify-between mt-2">
          <label class="flex items-center">
            <input type="checkbox" class="mr-1">
            <span class="text-sm text-gray-500">记住密码</span>
          </label>
          <a href="#" class="text-sm text-primary-500">忘记密码?</a>
        </div>
        <button
            class="w-full py-3 bg-primary-500 text-white rounded-full font-medium mt-6"
            @click="handleLogin"
        >
          登录
        </button>
        <div class="text-center mt-4">
          <span class="text-gray-500">还没有账号?</span>
          <a href="#" class="text-primary-500 ml-1" @click="goToRegister">立即注册</a>
        </div>
      </div>
    </div>

    <!-- 其他登录方式 -->
    <div class="mt-20 px-6">
      <div class="flex items-center justify-center">
        <div class="h-px flex-1 bg-gray-300"></div>
        <span class="mx-4 text-gray-500">其他登录方式</span>
        <div class="h-px flex-1 bg-gray-300"></div>
      </div>

      <div class="flex justify-center space-x-12 mt-8">
        <div class="flex flex-col items-center cursor-pointer">
          <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
            <i class="fa fa-qq text-blue-500 text-xl"></i>
          </div>
          <span class="text-xs mt-2">QQ</span>
        </div>
        <div class="flex flex-col items-center cursor-pointer">
          <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
            <i class="fa fa-wechat text-green-500 text-xl"></i>
          </div>
          <span class="text-xs mt-2">微信</span>
        </div>
        <div class="flex flex-col items-center cursor-pointer">
          <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
            <i class="fa fa-weibo text-red-500 text-xl"></i>
          </div>
          <span class="text-xs mt-2">微博</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 表单数据
const username = ref('')
const password = ref('')

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 跳转到注册页面
const goToRegister = () => {
  router.push({ name: 'Register' })
}

// 处理登录
const handleLogin = () => {
  if (!username.value || !password.value) {
    alert('请输入用户名和密码')
    return
  }

  // 模拟登录成功
  localStorage.setItem('token', 'fake_token_' + Date.now())

  alert('登录成功')
  router.push({ name: 'Profile' })
}
</script>